<template>
  <el-dialog
    title="发布页面"
    :visible.sync="dialogVisible"
    width="60%"
    :before-close="handleClose"
  >
    <div class="publishpage">
      <div class="searchbox">
        <el-input
          placeholder="请输入要搜索的模板名称"
          v-model="templateid"
          class="input-with-select"
        >
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
      <div class="templeptlist">
        <el-radio-group v-model="templateLists" @change="handleCheckedTemplateChange">
          <el-radio-button
            v-for="(item, index) in templateList"
            :label="item.id"
            :key="index"
            class="cardlist"
          >
            <el-card shadow="hover">
              <div class="telempttop">
                <p>家辅APP1.0版本</p>
                <p>已发布</p>
              </div>
              <img src="../../../assets/images/imgs.png" class="image" />
              <div class="telemptbottom">
                <span>应用产品：{{ item.appname }}</span>
                <span>备注：{{ item.remark }}</span>
                <span>更新时间：{{ item.updatetime }}</span>
              </div>
            </el-card>
          </el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="surePublishPage">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
const templateLists = [
  {
    id: 1,
    appname: "优教信使家辅版",
    remark: "1.0版本",
    updatetime: "2022-7-14",
  },
  {
    id: 2,
    appname: "优教信使教师版",
    remark: "2.0版本",
    updatetime: "2022-7-14",
  },
];
export default {
  props: {
    sonDialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      templateLists: [],
      dialogVisible: false,
      templateList: templateLists,
      templateid: "",
    };
  },
  methods: {
    // 弹出框关闭后触发
    handleClose() {
      // 子组件调用父组件方法，并传递参数
      this.$emit("changeShow", "false");
    },
    handleCheckedTemplateChange(value) {
      console.log(value, "6666666");
    },
    surePublishPage() {
      console.log("确认发布页面");
      this.$emit("changeShow", "false");
    },
  },
  watch: {
    // 监听 sonDialogVisible 改变
    sonDialogVisible(oldVal, newVal) {
      this.dialogVisible = this.sonDialogVisible;
    },
  },
};
</script>
<style lang="scss">
.searchbox {
  margin-bottom: 20px;
}
.el-checkbox-button:last-child .el-checkbox-button__inner {
  border: none;
  width: 300px;
  height: 400px;
  .image {
    width: 100%;
    height: 100%;
  }
}
.cardlist {
  .telempttop {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .telemptbottom {
    span {
      display: block;
      line-height: 30px;
      text-align: left;
    }
  }
}
</style>
